<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>关注列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card v-show="myFollowDialogVisible">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="adminName" @clear="searchFansOrFollow">
                        <el-button slot="append" icon="el-icon-search" @click="searchFansOrFollow"></el-button>
                    </el-input>
                </el-col>
              <el-col :span="8">
                <h3 style="color: aquamarine">关注列表</h3>
              </el-col>

              <el-col :span="4">
                <el-button type="primary" @click="changFollowOrFans()">显示粉丝列表</el-button>
              </el-col>
            </el-row>
            <el-table :data="myFollowList" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="姓名" prop="username"></el-table-column>
              <el-table-column label="昵称" prop="nickname"></el-table-column>
              <el-table-column label="手机" prop="tel"></el-table-column>
              <el-table-column label="关注">
                <template slot-scope="scope">{{getUserNames(scope.row.users)}}</template>
              </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageFollowNum"
                    :page-sizes="[5, 10,15]"
                    :page-size="pageFollowSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalFollow"
            ></el-pagination>
        </el-card>

        <el-card v-show="myFansDialogVisible">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="username" @clear="searchFansOrFollow">
                        <el-button slot="append" icon="el-icon-search" @click="searchFansOrFollow"></el-button>
                    </el-input>
                </el-col>
              <el-col :span="8">
                <h3 style="color: #42b983">粉丝列表</h3>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="changFollowOrFans()">显示关注列表</el-button>
              </el-col>
            </el-row>
            <el-table :data="myFansList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="昵称" prop="nickname"></el-table-column>
                <el-table-column label="手机" prop="tel"></el-table-column>
              <el-table-column label="粉丝">
                <template slot-scope="scope">{{getUserNames(scope.row.users)}}</template>
              </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageFanNum"
                    :page-sizes="[5, 10,15]"
                    :page-size="pageFanSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalFan"
            ></el-pagination>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                myFollowDialogVisible: true,
                myFansDialogVisible: false,
              pageFollowNum: 1,
              pageFollowSize: 5,
              totalFollow: 0,

              pageFanNum: 1,
              pageFanSize: 5,
              totalFan: 0,

              myFansList:[],
                myFollowList:[],
                username: "",
                adminName:"",
            };
        },
        methods: {
          getUserNames(arr) {
            if (!arr) return;
            let userNameArr = new Array();
            for (let i = 0; i < arr.length; i++) {
              userNameArr.push(arr[i].username);
            }
            return userNameArr.join(",");
          },
          changFollowOrFans(){
              if(this.myFansDialogVisible){
                this.myFollowDialogVisible=true;
                this.myFansDialogVisible=false;
              }else if(this.myFollowDialogVisible){
                this.myFansDialogVisible=true;
                this.myFollowDialogVisible=false;
              }
            },
            initFans() {
              let url  = "user/FanList";
              this.$axios.get(url,{
                params:{
                  now: this.pageFanNum,
                  size: this.pageFanSize,
                  username: this.username,
                }
              }).then(res=>{
                // console.log("+++++++++++++++++==")
                // console.log(res)
                if (res.data.code == 200){
                  this.myFansList = res.data.data.list;
                  this.totalFan = res.data.data.total;
                  this.pageFanNum = res.data.data.pageNum;
                  this.pageFanSize = res.data.data.pageSize;
                }else {
                  this.$message({
                    message:res.data.msg,
                    type:"error",
                    duration:1000
                  })
                }
              })
            },
            initFollows() {
              let url  = "user/followList";
              this.$axios.get(url,{
                params:{
                  now: this.pageFollowNum,
                  size: this.pageFollowSize,
                  name:this.adminName,
                }
              }).then(res=>{
                // console.log("+++++++++++++++++==")
                // console.log(res)
                if (res.data.code == 200){
                  this.myFollowList = res.data.data.list;
                  this.totalFollow = res.data.data.total;
                  this.pageFollowNum = res.data.data.pageNum;
                  this.pageFollowSize = res.data.data.pageSize;
                }else {
                  this.$message({
                    message:res.data.msg,
                    type:"error",
                    duration:1000
                  })
                }
              })
            },

            searchFansOrFollow() {
                this.pageFollowNum = 1;
                this.pageFanNum = 1;

                this.initFollows();
                this.initFans();
            },
            handleSizeChange(newSize) {
                this.pageFanSize = newSize;
                this.pageFolllowSize = newSize;
              this.initFans();
              this.initFollows();
            },
            handleCurrentChange(newPage) {
                this.pageFanNum = newPage;
                this.pageFollowNum = newPage;
              this.initFans();
              this.initFollows();
            },

        },
        created() {
            this.initFans();
            this.initFollows();
        }
    };
</script>
<style lang="less" scoped>
</style>